<template>

  <el-card class="pph">
    <div class="title">
      偏好设置
    </div>

    <el-row :gutter="20">
      <el-col :span="8"><div class="grid-content ep-bg-purple" />
        上午
        <div>
          <div class="slider-demo-block">
            <span class="demonstration">专注度</span>
            <el-slider v-model="sw.zzd"  :marks="marks" max="2" :step="1" show-stops/>
          </div>
          <div class="slider-demo-block">
            <span class="demonstration">时间连续性</span>
            <el-slider v-model="sw.sj"  :marks="marks" max="2" :step="1" show-stops/>
          </div>

        </div>
      </el-col>
      <el-col :span="8"><div class="grid-content ep-bg-purple" />
        中午
        <div>
          <div class="slider-demo-block">
            <span class="demonstration">专注度</span>
            <el-slider v-model="zw.zzd"  :marks="marks" max="2" :step="1" show-stops/>
          </div>
          <div class="slider-demo-block">
            <span class="demonstration">时间连续性</span>
            <el-slider v-model="zw.sj"  :marks="marks" max="2" :step="1" show-stops/>
          </div>

        </div>
      </el-col>
      <el-col :span="8"><div class="grid-content ep-bg-purple" />
        晚上
        <div>
          <div class="slider-demo-block">
            <span class="demonstration">专注度</span>
            <el-slider v-model="ws.zzd"  :marks="marks" max="2" :step="1" show-stops/>
          </div>
          <div class="slider-demo-block">
            <span class="demonstration">时间连续性</span>
            <el-slider v-model="ws.sj"  :marks="marks" max="2" :step="1" show-stops/>
          </div>

        </div>
      </el-col>
    </el-row>
  </el-card>

  <el-card class="db">
    <div class="title">
      时间安排
    </div>

    <el-form
        label-width="100px"
        :model="it"
        style="max-width: 460px"
        label-position="left"
    >
      <el-form-item label="事项名称">
        <el-input v-model="it.name" />
      </el-form-item>
      <el-form-item label="专注度" class="slider-demo-block">
        <el-slider v-model="it.concentration" max="4" :step="1" show-stops/>
      </el-form-item>
      <el-form-item label="时间连续性" class="slider-demo-block">
        <el-slider v-model="it.continuity" max="4" :step="1" show-stops/>
      </el-form-item>
      <el-form-item label="重要性" class="slider-demo-block">
        <el-slider v-model="it.importance" max="4" :step="1" show-stops/>
      </el-form-item>
    </el-form>
    <button @click="qqr">
  <span class="button-content">
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H24V24H0z" fill="none"></path><path d="M12.001 4.529c2.349-2.109 5.979-2.039 8.242.228 2.262 2.268 2.34 5.88.236 8.236l-8.48 8.492-8.478-8.492c-2.104-2.356-2.025-5.974.236-8.236 2.265-2.264 5.888-2.34 8.244-.228z" fill="currentColor"></path></svg> 确认
  </span>
    </button>
<!--    <el-button type="primary" @click="qqr">确认</el-button>-->
  </el-card>

  <el-dialog
      v-model="dialogsw"
      title="提醒"
      width="30%"
  >
    <span>提醒</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogsw = false">Cancel</el-button>
        <el-button type="primary" @click="dialogsw = false">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script lang="ts" setup>
// export default {
//   name: "Arrange"
// }

import {reactive,ref} from "vue";
import type { CSSProperties } from 'vue'
import { ElNotification } from 'element-plus'
import { h } from 'vue'

interface Mark {
  style: CSSProperties
  label: string
}

type Marks = Record<number, Mark | string>

const dialogsw= ref(false)
const dialogzw = ref(false)
const dialogws = ref(false)

const it = ref({
  name: '',
  concentration: '',
  continuity:"",
  importance: "",
})
const ph = ref()
const sw = ref({
  id:'上午',
  zzd:"",
  sj:""
})
const zw = ref({
  id:'中午',
  zzd:"",
  sj:""
})
const ws = ref({
  id:'晚上',
  zzd:"",
  sj:""
})

const marks = reactive<Marks>({
  0: '低',
  1: '中',
  2: '高',
})

function qqr(){
  const zong = (it.value.importance + it.value.concentration + it.value.continuity) /3;

  const ssw = sw.value.zzd + sw.value.sj;
  const zzw = zw.value.zzd + zw.value.sj;
  const wws = ws.value.zzd + ws.value.sj;
  const zong1 = Math.abs(zong - ssw);
  const zong2 = Math.abs(zong - zzw);
  const zong3 = Math.abs(zong - wws);
  if (zong1 <= zong2 && zong1 <= zong3){
    console.log("shangwu")
    opensw();
    }
  if (zong2 < zong1 && zong2 < zong3){
    console.log("zhhongwu")
    openzw();
  }
  if (zong3 < zong1 && zong3 < zong2){
    console.log("wanshang")
    openws();
  }
  }
const opensw = () => {
  ElNotification({
    title: "建议在上午完成" +  it.value.name,
    message: '',
    duration: 0,
  })
}
const openzw = () => {
  ElNotification({
    title: "建议在中午完成" +  it.value.name,
    message: '',
    duration: 0,
  })
}
const openws = () => {
  ElNotification({
    title: "建议在晚上完成" +  it.value.name,
    message: '',
    duration: 0,
  })
}
</script>

<style scoped>
.pph{
   width: 90%;
  margin: auto;
}
.db{
  width: 600px;
  margin: auto;
}
.title{
  font-size: 30px;

}
.slider-demo-block {
  display: flex;
  align-items: center;
}
.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 12px;
}
.slider-demo-block .demonstration {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  line-height: 44px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0;
}
.slider-demo-block .demonstration + .el-slider {
  flex: 0 0 70%;
}
button {
  font-size: 17px;
  font-family: inherit;
  font-weight: 700;
  padding: 4px;
  border-radius: 20px;
  border: none;
  color: black;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
  background: linear-gradient(0deg, rgba(255,213,0,1) 0%, rgba(255,213,0,1) 47%, rgba(0,91,187,1) 47%, rgba(0,91,187,1) 100%);
}

button .button-content {
  display: flex;
  align-items: center;
  background: white;
  padding: 0.7em 1.5em;
  padding-left: 1.2em;
  border-radius: 16px;
}

button svg {
  width: 22px;
  height: 22px;
  margin-right: 6px;
  color: #ff0000;
  transition: transform 0.3s;
}

button:hover svg {
  transform: scale(1.2);
}
</style>
